<template>
<div class="notice">
  <header>
    <div class="title">公交通知公告</div>
  </header>
  <section>
    <router-link tag="a" :to="{name: 'noticeDetail', params: item}" class="item" v-for="(item, index) in dataList" :key="index">
      <div class="item-title one-line-hide">{{item.title}}</div>
      <div class="item-subtitle">{{item.createTime | timeFilter}}</div>
    </router-link>
  </section>
</div>
</template>
<!-- 公交通知公告 -->
<script>
  export default {
    name: 'notice.vue',

    data () {
      return {
        // 公告数据列表
        dataList: []
      }
    },

    mounted () {
      this.$load.show({
        mask: true
      })
      this.fetchData()
    },

    methods: {
      // 获取公告列表
      fetchData () {
        this.dataList = []
        this.$http.post('/api/qrCode/getNewsList').then(res => {
          if (res.status === 200) {
            this.dataList = res.data
            console.log(res)
          } else {
            this.$toast.show(res.msg)
          }
          this.$load.hide()
        })
      }
    },

    filters: {
      // 时间过滤
      timeFilter (value) {
        return value.slice(0, 16)
      }
    }
  }
</script>

<style scoped lang="scss">
  .notice {
    header {
      background: url("../assets/images/notice-header.png");
      background-size: 100%, 100%;
      height: 114px;
      padding: 42px 0;

      .title {
        width: 100%;
        text-align: center;
        height: 30px;
        font-size: 22px;
        font-family: PingFangSC-Medium;
        font-weight: bold;
        color: $theme-white;
        line-height: 30px;
      }
    }

    section {
      background: $theme-white;
      padding: 0 16px;

      .item {
        display: block;
        padding: 16px 0;
        border-bottom: 1px solid $theme-border-color;

        &-title {
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: $theme-black;
          line-height: 20px;
        }

        &-subtitle {
          margin-top: 4px;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: $theme-gray;
          line-height: 17px;
        }
      }
    }
  }
</style>
